<template>
  <div class="">
    <nav-top class="pos t0 zi10" Licon="more" Ricon="r" @callback="navCb">
      <div class="add-btn" slot="r">
        <span class="add-icon unselect tac dib vat bsb">+</span> 添加
      </div>
    </nav-top>
    <div class="school-detail">
      <div class="blue flex lh1 tac">
        <div class="count flex-1" v-for="(count, i) in counts" :key="i">
          <div class="num">{{ info[count.prop] }}</div>
          <div class="text">{{ count.text }}</div>
        </div>
      </div>
      <div class="detail">
        <div class="item flex" v-for="(item, i) in details" :key="i">
          <div class="label flex-1">{{ item.label }}</div>
          <div class="value wsnw">{{ info | propText(item.prop) }}</div>
        </div>
      </div>
      <div class="table">
        <div class="t-header flex tac">
          <div class="cell flex-1"
               v-for="item in ['年级', '班名', '学生', '会员']">
            {{ item }}
          </div>
        </div>

        <load-more :no-data="noData"
                   class="table-inner"
                   @loadMore="more"
                   show-bottom>
          <div class="t-body tac">
            <div class="row flex"
                 v-for="(item, i) in list"
                 :key="i"
                 @click="toClassDetail(item)">
              <div class="grade flex-1">{{ item.nianji }}</div>
              <div class="class-name flex-1">{{ item.name }}</div>
              <div class="s-count flex-1">{{ item.student_num }}</div>
              <div class="v-count flex-1">{{ item.vip_num }}</div>
            </div>
          </div>
          <div v-if="!list.length" class="tips">暂无数据</div>
        </load-more>
      </div>
    </div>
    <gl-popup v-model="showAddBox" @close="showAddBox = false">
      <div class="add-box bsb">
        <img @click="showAddBox = false"
             class="close poa"
             src="../../../assets/images/icon/ico_close.png"/>
        <div class="add-box-btn tac"
             v-for="(item, i) in ['学生', '老师', '班级']"
             @click="add(i)"
             :key="i">
          添加{{ item }}
        </div>
      </div>
    </gl-popup>
  </div>
</template>

<script>
  export default {
    name: "SchoolDetail",
    data() {
      return {
        counts: [
          {text: "老师", value: "280", prop: "teacher_real_num"},
          {text: "班级", value: "166", prop: "class_real_num"},
          {text: "学生", value: "7845", prop: "student_real_num"}
        ],
        details: [
          {label: "学校管理员", value: "huiming", prop: "proxy_name"},
          {label: "状态", value: "审核通过", prop: "status"},
          {label: "线上付款", value: "200/¥86500.00", prop: "line"},
          {label: "后台登付", value: "30/¥6500.00", prop: "back"}
        ],
        list: [],
        curr: 0,
        limits: 10,
        total: 0,
        noData: false,
        showAddBox: false,
        info: {}
      };
    },
    filters: {
      propText(item, prop) {
        switch (prop) {
          case "status":
            return ["", "正常", "审核中", "审核不通过", "被禁用"][item.status];
          case "line":
            return item.line_sum + "/￥" + (item.line_income * 1 || 0).toFixed(2);
          case "back":
            return item.back_sum + "/￥" + (item.back_income * 1 || 0).toFixed(2);
        }
        return item[prop];
      }
    },
    created() {
      this.Http.getSchoolInfo({
        id: this.$route.params.id,
        get_income_data: true
      })
        .then(res => {
          this.info = res;
          document.title = res.school_name;
        })
        .catch(this.$err);
    },
    methods: {
      navCb(type) {
        switch (type) {
          case "more":
            this.showUserPopup();
            break;
          case "r":
            this.showAddBox = true;
            break;
        }
      },
      more(fn) {
        this.curr++;
        this.getList(fn);
      },
      toClassDetail(item) {
        this.$router.push({
          name: "ClassDetail",
          params: {
            id: item.id,
            nid: item.nianji_id,
            sid: this.$route.params.id
          }
        });
      },
      add(type) {
        this.$router.push({
          name: "AddSome",
          params: {
            type: ["stu", "tea", "cla"][type],
            sid: this.$route.params.id
          }
        });
      },
      getList(cb) {
        this.Http.getSchoolClassList({
          school_id: this.$route.params.id,
          curr: this.curr,
          limits: this.limits
        })
          .then(res => {
            // console.log(res);
            if (this.curr === 1) {
              this.list = [];
            }
            this.list.push(...res.list);
            this.total = res.total;
            this.noData = res.total <= this.list.length;
            cb && cb();
          })
          .catch(this.$err);
      }
    }
  };
</script>

<style scoped lang="less">
  .nav {
    background-color: #f7f8fa;
  }

  .school-detail {
    padding: 0 30px 30px;
    background-color: #f7f8fa;
  }

  .add-btn {
    color: #14c8ff;
    font-size: 30px;
    .add-icon {
      width: 31px;
      height: 31px;
      line-height: 31px;
      border: #14c8ff 1px solid;
      font-size: 36px;
      border-radius: 50%;
    }
  }

  .blue {
    margin: 0 6px 40px;
    padding: 40px 0;
    background: linear-gradient(-83deg, rgb(20, 200, 255), rgb(2, 151, 255));
    box-shadow: 0 7px 12px 0 rgba(79, 184, 254, 0.4);
    border-radius: 20px;
    color: #fff;
  }

  .count {
    font-size: 24px;
    height: 60px;
    &:not(:last-child) {
      border-right: 1px solid #e8e8e8;
    }
    .num {
      margin: -7px 0 24px;
      font-size: 36px;
    }
  }

  .detail {
    margin-bottom: 40px;
    background: #fff;
    box-shadow: 0 6px 18px 0 rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    line-height: 76px;
    font-size: 30px;
    color: #999;
    .item {
      padding: 0 36px;
      &:not(:last-child) {
        border-bottom: 1px solid #e8e8e8;
      }
    }
    .value {
      width: 223px;
      color: #222;
      font-weight: bold;
    }
  }

  .table {
    padding-top: 10px;
    height: calc(100vh - 698px);
    background: #fff;
    box-shadow: 0 6px 18px 0 rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    line-height: 77px;
    color: #999;
    .row {
      border-bottom: 1px solid #f7f8fa;
      color: #222;
    }
    .t-header {
      border-bottom: 1px solid #f7f8fa;
    }
  }
  .table-inner {
    height: calc(100% - 77px);
  }

  .add-box {
    padding: 108px 125px 98px;
    width: 648px;
    background: #fff;
    box-shadow: 0 6px 18px 0 rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    .close {
      width: 30px;
      height: 30px;
      top: 34px;
      right: 34px;
    }
    .add-box-btn {
      height: 90px;
      line-height: 90px;
      background: linear-gradient(-83deg, rgb(20, 200, 255), rgb(2, 151, 255));
      box-shadow: 0 7px 12px 0 rgba(79, 184, 254, 0.4);
      border-radius: 48px;
      color: #fff;
      font-size: 32px;
      &:not(:last-child) {
        margin-bottom: 54px;
      }
    }
  }

  .tips {
    font-size: 32px;
    text-align: center;
    padding: 40px;
  }
</style>
